<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../js/myQuery.js"></script> -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #title {
            line-height: 40px;
            height: 40px;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list li+li {
            border-top: 0;
        }

        .button-group {
            margin-top: 10px;
        }

        .button-group button {
            height: 30px;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">dom操作封装</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
    </div>
    <div class="button-group">
        <button class="setHtml">html</button>
        <button class="hide">hide</button>
        <button class="show">show</button>
        <button class="css">css</button>
        <button class="width">width</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>

    console.log($(".list li"));

    $(".setHtml").click(function () {
        $(".list li").html("123123")
    })

    $(".hide").click(function () {
        $(".list li").hide()
    })

    $(".show").click(function () {
        $(".list li").show()
    })

    $(".css").click(function () {
        // 设置
        // $(".list li").css("width", "200px");
        // $(".list li").css("height", "200px");
        // $(".list li").css("background-color", "red");
        // $(".list li").css("text-align", "center");
        // $(".list li").css("line-height", "200px");

        // 设置 -> 传入一个对象参数 
        $(".list li").css({
            width: "200px",
            height: "200px",
            backgroundColor: "red",
            textAlign: "center",
            lineHeight: "200px",
        });

        // 获取
        // console.log($(".list li").css("width"));
        // console.log($(".list li").css("height"));
        // console.log($(".list li").css("backgroundColor"));
    })

    $(".width").click(function () {
        // $(".list li").width("50%");
        $(".list li").width(200);
        $(".list li").height(200);

        console.log($(".list li").width());
        console.log($(".list li").height());
    })

    $(".attr").click(function () {
        $(".list li").attr("class", "list-item");
        $(".list li").attr("title", "hello");
        $(".list li").attr("data-msg", "world");
    })

    $(".prop").click(function () {
        console.log($(".list li").prop("className"));
        console.log($(".list li").prop("title"));
        console.log($(".list li").prop("clientWidth"));

    })




    $(".eq").click(function () {
        $(".list li").eq(2).css({ backgroundColor: "red" });
    })

    $(".siblings").click(function () {
        $(".list li").eq(2).siblings().css({ backgroundColor: "blue" });
    })


    $(".chain").click(function () {

        // 链式操作 -> 前提: 返回值相同类型的数据(原本的/新的)
        $(".list li").click(function () {
            console.log($(this).index());
        }).eq(2).html("hello").width(100).height(100).css({ background: "red" }).siblings().html("world").width(200).height(200).css({ backgroundColor: "blue" });
    })



    $(".list li").click(function () {
        // this -> 被点击的li
        // var index = $(this).index();
        // console.log(index);

        // $(this).css({ background: "red" });
        // $(this).siblings().css({ background: "#fff" });

        $(this).css({ background: "red" }).siblings().css({ background: "#fff" })
    })











</script>

</html>